<template>
    <div>
        <van-field
        readonly
        clickable
        name="picker"
        :value="className"
        label="档案组"
        placeholder=""
        @click="showClassPicker = true"
        />
        <van-popup v-model="showClassPicker" position="bottom">
        <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onClassConfirm"
        @cancel="showClassPicker = false"
        />
        </van-popup>

            <!-- <van-field
            class="input_text"
            name="calendar"
            :value="form.EquipmentTypeName"
            label="设备类型"
            placeholder="请选择"
            readonly
            required
            @click="
            handleDialog(
                'EquipmentTypeParams',
                form.EquipmentType,
                'EquipmentTypeName',
                'EquipmentType'
            )
            "
        >
            <template #right-icon><van-icon name="arrow" /></template>
        </van-field> -->
        </div>
</template>

<script>
import { Picker } from 'vant'
export default {
  name: 'VanFieldSelectPicker',
  components: {
    vanPicker: Picker,
  },
  model: {
    prop: "selectValue"
  },
  props: {
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    selectValue: {
      type: [String, Number],
      default: ''
    },
    option: {
      type: Object,
      default: function () {
        return { label: 'Name', value: 'ID' }
      }
    }
  },
  computed: {
    resultLabel: {//双向绑定的数据做修改需要用get/set
      get () {
        const res = this.columns.filter(item => {
          return item[this.option.value] === this.resultValue
        })
        return res.length ? res[0][this.option.label] : ''
      },
      set () {

      }
    }
  },
  data() {
    return {
      show: false,
      resultValue: this.selectValue,
      classId: -1,
      className: "全部",
    };
  },
  methods: {
    onClassConfirm(v) {
        this.classId = v.value;
        this.className = v.text;
        this.showClassPicker = false;
    },
  },
};
</script>

<style></style>